<template>
  <el-cascader
    v-model="result"
    :options="data"
    :props="props"
    @change="change"
    clearable
    filterable
    placeholder="试试搜索：手机"
  >
  </el-cascader>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      props: { label: 'name', value: 'catId' },
      result: [],
      data: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    set(val) {
      this.result = val
    },
    reset() {
      this.result = []
    },
    init() {
      this.reset()
      this.$api.get('/product/category/tree').then(({ data }) => {
        this.data = data.data
      })
    },
    change(data) {
      this.$emit('change', data)
    }
  }
}
</script>

<style scoped>

</style>
